<template>
  <NavBarVue title='店铺活动详情'/>
  <view class="active_detail">
    <view class="top_box">
      <view class="h1">{{shopStore.shopInfoData.shopInfos.storeIntroduction}}</view>
      <view class="rate_star">
        <u-rate :value="'5'" readonly></u-rate>
        <text class="spa">￥50/人</text>
      </view>
      <view class="x_scroll">
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
          <img class="demo"
               src="https://img2.baidu.com/it/u=1544100220,3453911849&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
               alt=""/>
          <img class="demo"
               src="https://img1.baidu.com/it/u=525880268,1874683061&fm=253&fmt=auto&app=138&f=JPEG?w=769&h=500"
               alt=""/>
          <img class="demo"
               src="https://img1.baidu.com/it/u=1780128475,2196746060&fm=253&fmt=auto&app=138&f=JPEG?w=725&h=500"
               alt=""/>
          <img class="demo"
               src="https://img1.baidu.com/it/u=3875847714,1536778447&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=428"
               alt=""/>
          <img class="demo"
               src="https://img2.baidu.com/it/u=958588398,2041682710&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500"
               alt=""/>
        </scroll-view>
      </view>
      <view class="operating">
        <text>营业中</text>
        <text class="date">12:00-24:00</text>
      </view>
      <view class="pos">
        <view class='pos_left'>
          <text class="iconfont icon-dingwei" style="padding-top: 5rpx;padding-right: 10rpx;"></text>
          <view class="left_top">
            <view class="">
              {{shopStore.shopInfoData.shopInfos.storeLocation}}
            </view>
            <view class="left_bom">距您3.1km，需要6分钟</view>
          </view>
        </view>
        <view class='pos_right'>
          <view class="icn" v-for="(item,idx) in addressCarList" :key="idx">
            <text :class="'iconfont icon-' + item.icon"></text>
            <view class="picon">{{item.iconName}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom_box">
      <view class="shadow"></view>
      <view class="shop_image">
        <img class="imgs" src="/static/imgAll/矩形(4).png" alt=""/>
      </view>
      <view class="coupon_list" v-for="item in activity" :key="item.id">
        <view class="li_top">
          <view class="li_h2">
            {{item.title}}
          </view>
          <view class="li_p">
            <text>活动时间：</text>
            <text>{{item.times}}</text>
          </view>
        </view>
        <view class="li_con">
          <img class="li_imgs" :src="item.img" alt=""/>
          <view class="con_right">
            <view class="con_p">{{item.range}}</view>
            <view class="con_p">
              <text>数量：</text>
              <text>{{item.num}}</text>
            </view>
            <view class="con_p">{{item.slogan}}</view>
          </view>
        </view>
        <view class="li_bom">
          <button class="li_btn">领取优惠券</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app'
import NavBarVue from '../../../../components/NavBar.vue';
import {
  useShopStore
} from '../../../../store'

// 获取门店信息
const shopStore = useShopStore()
onMounted(() => {
  getShopStoreById(4)
})
const getShopStoreById = (id) => {
  shopStore.shopInfo(id)
}

// 收藏列表
const addressCarList = reactive([{
  icon: 'shoucang',
  iconName: '收藏'
},
  {
    icon: 'daohang',
    iconName: '导航'
  },
  {
    icon: 'xiaoqiche',
    iconName: '打车'
  }
])

const scrollTop = ref(0)
const old = ref({
  scrollTop: 0
})
const scroll = function (e) {
  old.value.scrollTop = e.detail.scrollTop
}
const amap = require("../../../../static/amap-wx.130.js")
const amapPlugin = ref(null)
const address = ref(null)
const getAddress = () => {
  amapPlugin.value = new amap.AMapWX({
    key: "0c25a82d19ebe2c3e94e1d1b190709d3"
  });
  uni.showLoading({
    title: '获取信息中'
  });
  // 成功获取位置
  amapPlugin.value.getRegeo({
    success: (data) => {
      console.log(data, '当前定位')
      address.vlaue =
          `${data[0].regeocodeData.addressComponent.province}${data[0].regeocodeData.addressComponent.district}${data[0].regeocodeData.addressComponent.township}`;
      uni.hideLoading();
    },
    // 获取位置失败
    fail: (err) => {
      console.log(err);
      uni.showToast({
        title: "获取位置失败，请重启小程序",
        icon: "error"
      })
    }
  });
}

// 活动列表
const activity = [{
  img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  title: "彻夜畅玩场",
  times: "21:00-02:00",
  range: "21:00至次日06:00内",
  num: 20,
  slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
},
  {
    img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "彻夜畅玩场",
    times: "21:00-02:00",
    range: "21:00至次日06:00内",
    num: 20,
    slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
  },
  {
    img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "彻夜畅玩场",
    times: "21:00-02:00",
    range: "21:00至次日06:00内",
    num: 20,
    slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
  },
  {
    img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "彻夜畅玩场",
    times: "21:00-02:00",
    range: "21:00至次日06:00内",
    num: 20,
    slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
  },

]
</script>

<style lang="scss">
.active_detail {
  width: 100%;
  height: 100%;
  margin-left: 30rpx;
  display: flex;
  flex-direction: column;
  font-family: PingFangSC, PingFang SC;
}

.top_box {
  height: 750rpx;
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .h1 {
    font-weight: 600;
    font-size: 50rpx;
    color: #222222;
    line-height: 55rpx;
    text-align: justify;
    font-style: normal;
  }

  .rate_star {
    display: flex;
    align-items: center;

    .spa {
      margin-left: 10px;
    }
  }

  .x_scroll {
    margin-top: 20rpx;

    .scroll-Y {
      height: 300rpx;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      margin: 10rpx 0rpx;
    }

    .scroll-view-item {
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
      font-size: 36rpx;
    }

    .scroll-view-item_H {
      display: inline-block;
      width: 100%;
      height: 300rpx;
      line-height: 300rpx;
      text-align: center;
      font-size: 36rpx;
    }

    .demo {
      width: 320rpx;
      height: 240rpx;
      margin-right: 8rpx;
      border-radius: 20rpx;
    }
  }

  .operating {
    font-size: 24rpx;
    position: relative;

    .iconfont {
      font-size: 38rpx;
    }

    .date {
      padding-left: 8rpx;
    }
  }

  .operating::after {
    content: "";
    display: block;
    width: 93%;
    height: 1px;
    background-color: #b2b2b2;
    position: absolute;
    bottom: -30rpx;
    transform: translateY(-50%);
  }

  .pos {
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .pos_left {
      display: flex;

      .left_top {
        font-weight: bold;
        margin-bottom: 5px;
      }

      .left_bom {
        color: #9C9C9C;
      }
    }

    .pos_right {
      display: flex;
      padding-right: 30rpx;

      .icn {
        text-align: center;
        padding: 0rpx 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20rpx;

        .picon {
          font-size: 20rpx;
          margin-top: 8rpx;
        }
      }
    }
  }
}

.bottom_box {
  flex: 1;
  display: grid;
  background-color: #eee;

  .shop_image {
    margin-top: 20rpx;
    background-color: #fff;

    .imgs {
      width: 94%;
      border-radius: 16rpx;
    }
  }

  .coupon_list {
    background-color: white;
    color: #9C9C9C;
    margin-top: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .li_top {
      display: flex;
      justify-content: space-between;
      margin-left: 20rpx;
      margin-top: 30rpx;
      margin-right: 60rpx;

      .li_h2 {
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
      }

      .li_p {
        font-size: 26rpx;
      }
    }

    .li_con {
      display: flex;
      justify-content: flex-start;
      margin-left: 20rpx;
      margin-top: 30rpx;

      .li_imgs {
        width: 112rpx;
        height: 112rpx;
        border-radius: 10px;
      }

      .con_right {
        padding-left: 20rpx;
        font-size: 24rpx;

        .con_p {
          padding: 2rpx 0rpx;
        }
      }
    }

    .li_bom {
      flex: 1;
      margin-top: 30rpx;
      margin-bottom: 20rpx;

      .li_btn {
        float: right;
        width: 168rpx;
        height: 64rpx;
        padding: 0rpx;
        margin: 0rpx;
        right: 70rpx;
        font-size: 24rpx;
        border-radius: 70rpx;
        line-height: 64rpx;
        color: white;
        background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
      }
    }
  }
}
</style>